<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 响应式核心原理 1</title>
</head>
<body>
    <div id="app">
        hello 
    </div>

    <script>
        let data = {
            msg: "hello",
            count: 90099,
            age: 22
        }
        let vm = {}
        
        function proxyData(data) {
            Object.keys(data).forEach(item => {
                Object.defineProperty(vm, item, {
                    // 可枚举，可遍历
                    enumerable: true,
                    // 可配置（可以通过delete删除，可以通过defineProperty重新定义）
                    configurable: true,

                    get() {
                        console.log("get ...")
                        return data[item]
                    },
                    set(val){
                        console.log("set ...")
                        if (val === data[item]) {
                            return 
                        }
                        data[item] = val
                        document.querySelector("#app").textContent = data.msg
                    }
                })
            })
        }
        proxyData(data)

        vm.msg = "hello world"
        console.log(vm.msg)
        
    </script>
</body>
</html>